<template>
  <div>
    <div class="spanSty"><span>国家基本公共卫生服务项目居民健康档案</span></div>
    <el-divider content-position="left">编号</el-divider>
    <el-form
      :model="form"
      ref="formRef"
      :rules="formRules"
      label-width="130px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="性别">
            <el-select v-model="form.sex" style="width: 100%">
              <el-option
                v-for="item in sex"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard">
              <el-button
                style="padding-right: 10px"
                slot="suffix"
                type="text"
                @click="pushForm"
                v-if="ifEdit==false"
                >同步数据</el-button
              >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="现住址">
            <el-input v-model="form.nowAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="户籍地址">
            <el-input v-model="form.permanentAddress"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="乡镇(街道)名称">
            <el-input v-model="form.townshipName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="村(居)委会名称">
            <el-input v-model="form.vcName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="工作单位">
            <el-input v-model="form.workUnit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="联系人姓名">
            <el-input v-model="form.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="联系人电话" prop="contactNumber">
            <el-input v-model="form.contactNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="常驻类型">
            <el-select v-model="form.residentType" style="width: 100%">
              <el-option
                v-for="item in residentType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="民族">
            <el-input v-model="form.nation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="血型">
            <el-select v-model="form.bloodType" style="width: 100%">
              <el-option
                v-for="item in bloodType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="RH阴性">
            <el-select v-model="form.bloodTypeRH" style="width: 100%">
              <el-option
                v-for="item in bloodTypeRH"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="文化程度">
            <el-select v-model="form.educationDegree" style="width: 100%">
              <el-option
                v-for="item in educationDegree"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="职业">
            <el-select v-model="form.occupation" style="width: 100%">
              <el-option
                v-for="item in occupation"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="医疗费用支付方式">
            <el-select
              v-model="payTypeArr"
              multiple
              style="width: 100%"
              @change="seChange"
            >
              <el-option
                v-for="item in payType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="婚姻状况">
            <el-select v-model="form.maritalStatus" style="width: 100%">
              <el-option
                v-for="item in maritalStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="!(payTypeArr.indexOf('1') == -1)">
          <el-form-item label="卡号(城镇或省...)" :show-overflow-tooltip="true">
            <el-input v-model="form.townPayCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="!(payTypeArr.indexOf('2') == -1)">
          <el-form-item label="卡号(居民基本...)">
            <el-input v-model="form.residentPayCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="!(payTypeArr.indexOf('3') == -1)">
          <el-form-item label="卡号(贫困救助卡)">
            <el-input v-model="form.pavertyReliefCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="!(payTypeArr.indexOf('7') == -1)">
          <el-form-item label="其他(医疗费用...)">
            <el-input v-model="form.otherContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="药物过敏史">
            <el-select
              v-model="drugAllergyArr"
              multiple
              style="width: 100%"
              @change="seChange1"
            >
              <el-option
                v-for="item in drugAllergy"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="暴露史">
            <el-select
              v-model="exposureArr"
              style="width: 100%"
              multiple
              @change="seChange2"
            >
              <el-option
                v-for="item in exposure"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="!(drugAllergyArr.indexOf('5') == -1)">
          <el-form-item label="其他(药物过敏史)">
            <el-input v-model="form.drugAllergyOtherContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-divider content-position="left">既往病史</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="既往病史">
            <el-checkbox-group v-model="medicalList">
              <el-checkbox label="疾病" key="1"></el-checkbox>
              <el-checkbox label="手术" key="2"></el-checkbox>
              <el-checkbox label="外伤" key="3"></el-checkbox>
              <el-checkbox label="输血" key="4"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="!(medicalList.indexOf('疾病') == -1)">
          <HButton @click="addDisease()" type="add" size="mini">疾病</HButton>
          <el-table class="mt-20" :data="disease" border stripe>
            <el-table-column prop="diseaseName" label="疾病名称">
            </el-table-column>
            <el-table-column prop="diseaseTime" label="确诊时间">
            </el-table-column>
            <el-table-column prop="diseaseDesc" label="备注"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <HButton
                  @click="delDisease(scope.$index)"
                  type="delete"
                  size="mini"
                  >删除</HButton
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="!(medicalList.indexOf('手术') == -1)">
          <HButton @click="addOperation()" type="add" size="mini">手术</HButton>
          <el-table class="mt-20" :data="operation" border stripe>
            <el-table-column prop="operationName" label="手术名称">
            </el-table-column>
            <el-table-column prop="operationTime" label="时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <HButton
                  @click="delOperation(scope.$index)"
                  type="delete"
                  size="mini"
                  >删除</HButton
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="!(medicalList.indexOf('外伤') == -1)">
          <HButton @click="addTrauma()" type="add" size="mini">外伤</HButton>
          <el-table class="mt-20" :data="trauma" border stripe>
            <el-table-column prop="traumaName" label="外伤名称">
            </el-table-column>
            <el-table-column prop="traumaTime" label="时间"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <HButton
                  @click="delTrauma(scope.$index)"
                  type="delete"
                  size="mini"
                  >删除</HButton
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="!(medicalList.indexOf('输血') == -1)">
          <HButton @click="addBlood()" type="add" size="mini">输血</HButton>
          <el-table class="mt-20" :data="blood" border stripe>
            <el-table-column prop="bloodReason" label="输血原因">
            </el-table-column>
            <el-table-column prop="bloodtime" label="输血时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <HButton
                  @click="delBlood(scope.$index)"
                  type="delete"
                  size="mini"
                  >删除</HButton
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-divider content-position="left">家族史</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="父亲">
            <el-select
              v-model="fatherPrevalenceArr"
              multiple
              style="width: 100%"
              @change="seChange3"
            >
              <el-option
                v-for="item in fatherPrevalence"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="母亲">
            <el-select
              v-model="motherPrevalenceArr"
              multiple
              style="width: 100%"
              @change="seChange4"
            >
              <el-option
                v-for="item in motherPrevalence"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :lg="12"
          :xl="12"
          v-if="!(fatherPrevalenceArr.indexOf('12') == -1)"
        >
          <el-form-item label="其他（父亲）">
            <el-input v-model="form.fatherPrevalenceOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :lg="12"
          :xl="12"
          v-if="!(motherPrevalenceArr.indexOf('12') == -1)"
        >
          <el-form-item label="其他（母亲）">
            <el-input v-model="form.motherPrevalenceOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="兄弟姐妹">
            <el-select
              v-model="brotherPrevalenceArr"
              multiple
              style="width: 100%"
              @change="seChange5"
            >
              <el-option
                v-for="item in brotherPrevalence"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="子女">
            <el-select
              v-model="childrenPrevalenceArr"
              multiple
              style="width: 100%"
              @change="seChange6"
            >
              <el-option
                v-for="item in childrenPrevalence"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :lg="12"
          :xl="12"
          v-if="!(brotherPrevalenceArr.indexOf('12') == -1)"
        >
          <el-form-item label="其他（兄弟姐妹）">
            <el-input v-model="form.brotherPrevalenceOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :lg="12"
          :xl="12"
          v-if="!(childrenPrevalenceArr.indexOf('12') == -1)"
        >
          <el-form-item label="其他（子女）">
            <el-input v-model="form.childrenPrevalenceOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="遗传病史">
            <el-select v-model="form.genetic" style="width: 100%">
              <el-option
                v-for="item in genetic"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="残疾情况">
            <el-select v-model="form.disability" style="width: 100%">
              <el-option
                v-for="item in disability"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="['0'].includes(form.genetic)">
          <el-form-item label="（遗传病史）">
            <el-input v-model="form.geneticContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="['8'].includes(form.disability)">
          <el-form-item label="（残疾情况）">
            <el-input v-model="form.disabilityOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">家庭情况</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="户主姓名">
            <el-input v-model="form.householderName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="户主身份证号">
            <el-input v-model="form.householderIdCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="家庭人口数">
            <el-input v-model="form.familyPopulation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="家庭结构">
            <el-input v-model="form.familyStructure"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="居住情况">
            <el-select v-model="form.livingConditions" style="width: 100%">
              <el-option
                v-for="item in livingConditions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"></el-col>
      </el-row>
      <el-divider content-position="left">生活环境</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="燃料类型">
            <el-select v-model="form.fuelType" style="width: 100%">
              <el-option
                v-for="item in fuelType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="饮水">
            <el-select v-model="form.drinkWater" style="width: 100%">
              <el-option
                v-for="item in drinkWater"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="['6'].includes(form.fuelType)">
          <el-form-item label="（燃料类型）">
            <el-input v-model="form.fuelTypeOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="['6'].includes(form.drinkWater)">
          <el-form-item label="（饮水）">
            <el-input v-model="form.drinkWaterOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="厨房排风设施">
            <el-select v-model="form.kitchenExhaust" style="width: 100%">
              <el-option
                v-for="item in kitchenExhaust"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="厕所">
            <el-select v-model="form.toilet" style="width: 100%">
              <el-option
                v-for="item in toilet"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="禽畜栏">
            <el-select v-model="form.poultryCorral" style="width: 100%">
              <el-option
                v-for="item in poultryCorral"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="建档单位">
            <el-input v-model="form.filingUnit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="建档人">
            <el-input v-model="form.filingPerson"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="建档医生">
            <el-input v-model="form.filingDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="建档日期" prop="filingDate">
            <el-date-picker
              v-model="form.filingDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="居民签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="submitSty">
        <HButton type="add" @click="submit('formRef')">提交</HButton>
      </el-row>
    </el-form>
    <diseaseAdd ref="diseaseAdd" @transData="diseaseAdd"></diseaseAdd>
    <operationAdd ref="operationAdd" @transData="operationAdd"></operationAdd>
    <traumaAdd ref="traumaAdd" @transData="traumaAdd"></traumaAdd>
    <bloodAdd ref="bloodAdd" @transData="bloodAdd"></bloodAdd>
  </div>
</template>

<script>
import axios from "axios";
import diseaseAdd from "./components/disease-add";
import operationAdd from "./components/operation-add";
import traumaAdd from "./components/trauma-add";
import bloodAdd from "./components/blood-add";
import { inputValidator, IDValid ,phoneValid} from "@/utils/validate";
import {
  sex,
  residentType,
  bloodType,
  bloodTypeRH,
  educationDegree,
  occupation,
  maritalStatus,
  payType,
  drugAllergy,
  exposure,
  fatherPrevalence,
  motherPrevalence,
  brotherPrevalence,
  childrenPrevalence,
  genetic,
  disability,
  livingConditions,
  kitchenExhaust,
  fuelType,
  drinkWater,
  toilet,
  poultryCorral,
  addResident,
  addFileUrl,
  getByCard,
} from "@/api/followForms/followForms";
const baseApi = process.env.VUE_APP_BASE_API;
export default {
  components: { diseaseAdd, operationAdd, traumaAdd, bloodAdd },
  data() {
    return {
      fileList: [],
      fileList1: [],
      // addFileUrl: baseApi + addFileUrl,
      ifEdit:false,
      form: {
        sex: "1",
        birthday: "",
      },
      disease: [],
      operation: [],
      trauma: [],
      blood: [],
      medicalList: [],
      payTypeArr: [],
      drugAllergyArr: [],
      exposureArr: [],
      fatherPrevalenceArr: [],
      motherPrevalenceArr: [],
      brotherPrevalenceArr: [],
      childrenPrevalenceArr: [],
      sex: sex,
      residentType: residentType,
      bloodType: bloodType,
      bloodTypeRH: bloodTypeRH,
      educationDegree: educationDegree,
      occupation: occupation,
      maritalStatus: maritalStatus,
      payType: payType,
      drugAllergy: drugAllergy,
      exposure: exposure,
      fatherPrevalence: fatherPrevalence,
      motherPrevalence: motherPrevalence,
      brotherPrevalence: brotherPrevalence,
      childrenPrevalence: childrenPrevalence,
      genetic: genetic,
      disability: disability,
      livingConditions: livingConditions,
      kitchenExhaust: kitchenExhaust,
      fuelType: fuelType,
      drinkWater: drinkWater,
      toilet: toilet,
      poultryCorral: poultryCorral,
      formRules: {
        userName: inputValidator,
        idCard: IDValid,
        filingDate: inputValidator,
        contactNumber:phoneValid,
        phone:phoneValid
      },
    };
  },
  created() {},
  methods: {
    addDisease() {
      this.$refs.diseaseAdd.openDialog();
    },
    addOperation() {
      this.$refs.operationAdd.openDialog();
    },
    addTrauma() {
      this.$refs.traumaAdd.openDialog();
    },
    addBlood() {
      this.$refs.bloodAdd.openDialog();
    },
    delDisease(index) {
      this.form.disease.splice(index, 1);
    },
    delOperation(index) {
      this.form.operation.splice(index, 1);
    },
    delTrauma(index) {
      this.form.trauma.splice(index, 1);
    },
    delBlood(index) {
      this.form.blood.splice(index, 1);
    },
    diseaseAdd(form) {
      this.disease.push(JSON.parse(JSON.stringify(form)));
    },
    operationAdd(form) {
      this.operation.push(JSON.parse(JSON.stringify(form)));
    },
    traumaAdd(form) {
      this.trauma.push(JSON.parse(JSON.stringify(form)));
    },
    bloodAdd(form) {
      this.blood.push(JSON.parse(JSON.stringify(form)));
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            this.form.birthday = this.dateChange(this.form.birthday);
            this.form.filingDate = this.dateChange(this.form.filingDate);
            if (this.disease.length > 0) {
              this.disease.forEach((e) => {
                e.diseaseTime = this.dateChange(e.diseaseTime);
              });
              this.form.disease = JSON.stringify(this.disease);
            }
            if (this.operation.length > 0) {
              this.operation.forEach((e) => {
                e.operationTime = this.dateChange(e.operationTime);
              });
              this.form.operation = JSON.stringify(this.operation);
            }
            if (this.trauma.length > 0) {
              this.trauma.forEach((e) => {
                e.traumaTime = this.dateChange(e.traumaTime);
              });
              this.form.trauma = JSON.stringify(this.trauma);
            }
            if (this.blood.length > 0) {
              this.blood.forEach((e) => {
                e.bloodTime = this.dateChange(e.bloodTime);
              });
              this.form.blood = JSON.stringify(this.blood);
            }
             this.uploadImage();
            addResident(this.form).then((res) => {
              if (res.code == "AA000000") {
                this.$message.success(res.msg);
              } else {
                this.form.birthday = "";
                this.form.filingDate = "";
              }
            });
        } else {
          return false;
        }
      });
      // this.$refs.formRef.validate(async (valid) => {
      //   if (!valid) return this.$message.error("请输入必填项!");
      //   this.form.birthday = this.dateChange(this.form.birthday);
      //   this.form.filingDate = this.dateChange(this.form.filingDate);
      //   if (this.disease.length > 0) {
      //     this.disease.forEach((e) => {
      //       e.diseaseTime = this.dateChange(e.diseaseTime);
      //     });
      //     this.form.disease = JSON.stringify(this.disease);
      //   }
      //   if (this.operation.length > 0) {
      //     this.operation.forEach((e) => {
      //       e.operationTime = this.dateChange(e.operationTime);
      //     });
      //     this.form.operation = JSON.stringify(this.operation);
      //   }
      //   if (this.trauma.length > 0) {
      //     this.trauma.forEach((e) => {
      //       e.traumaTime = this.dateChange(e.traumaTime);
      //     });
      //     this.form.trauma = JSON.stringify(this.trauma);
      //   }
      //   if (this.blood.length > 0) {
      //     this.blood.forEach((e) => {
      //       e.bloodTime = this.dateChange(e.bloodTime);
      //     });
      //     this.form.blood = JSON.stringify(this.blood);
      //   }
      //   await this.uploadImage();
      //   addResident(this.form).then((res) => {
      //     if (res.code == "AA000000") {
      //       this.$message.success(res.msg);
      //     } else {
      //       this.form.birthday = "";
      //       this.form.filingDate = "";
      //     }
      //   });
      // });
    },
    //支付方式选择
    seChange(value) {
      this.form.payType = this.payTypeArr.toString();
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf("1") == -1)) {
        options.forEach((e) => {
          if (e.id != "1") {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == "1") {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //药物过敏史选择
    seChange1(value) {
      this.form.drugAllergy = this.drugAllergyArr.toString();
      this.select(value, this.drugAllergy);
    },
    //暴露史选择
    seChange2(value) {
      this.form.exposure = this.exposureArr.toString();
      this.select(value, this.exposure);
    },
    //父亲-选择
    seChange3(value) {
      this.form.fatherPrevalence = this.fatherPrevalenceArr.toString();
      this.select(value, this.fatherPrevalence);
    },
    //母亲-选择
    seChange4(value) {
      this.form.motherPrevalence = this.motherPrevalenceArr.toString();
      this.select(value, this.motherPrevalence);
    },
    //兄弟-选择
    seChange5(value) {
      this.form.brotherPrevalence = this.brotherPrevalenceArr.toString();
      this.select(value, this.brotherPrevalence);
    },
    //子女-选择
    seChange6(value) {
      this.form.childrenPrevalence = this.childrenPrevalenceArr.toString();
      this.select(value, this.childrenPrevalence);
    },
    //转时间戳
    dateChange(date) {
      return new Date(date).getTime();
    },
    //上传图片
    async uploadImage() {
      let formData = new FormData();
      if (this.fileList.length > 0) {
        this.fileList.map((item) => {
          formData.append("images", item.raw);
        });
        formData.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.addFileUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            "token":this.$store.state.token
          },
          withCredentials: false,
          data: formData,
        }).then((res) => {
          if (res.data.code == "AA000000") {
            this.form.pictures = res.data.data;
          }
        });
      }

      let formData1 = new FormData();
      if (this.fileList1.length > 0) {
        this.fileList1.map((item) => {
          formData1.append("images", item.raw);
        });
        formData1.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.addFileUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            "token":this.$store.state.token
          },
          withCredentials: false,
          data: formData1,
        }).then((res1) => {
          if (res1.data.code == "AA000000") {
            this.form.residentName = res1.data.data;
          }
        });
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList1.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    formData(data) {
      this.form = data;
      for (var key in this.form) {
        if (typeof this.form[key] == "number") {
          if ([key] != "birthday" && [key] != "filingDate")
            this.form[key] = this.form[key].toString();
        }
      }
      if (data.disease != "") {
        this.disease = JSON.parse(data.disease);
        this.medicalList.push("疾病");
      }
      if (data.operation != "") {
        this.operation = JSON.parse(data.operation);
        this.medicalList.push("手术");
      }
      if (data.trauma != "") {
        this.trauma = JSON.parse(data.trauma);
        this.medicalList.push("外伤");
      }
      if (data.blood != "") {
        this.blood = JSON.parse(data.blood);
        this.medicalList.push("输血");
      }
      if (this.form.picpictures != "") {
        let obj = new Object();
        obj.url = baseApi + "/file/" + this.form.pictures;
        this.fileList.push(obj);
      }
      if (this.form.residentName != "") {
        let obj1 = new Object();
        obj1.url = baseApi + "/file/" + this.form.residentName;
        this.fileList1.push(obj1);
      }
      this.payTypeArr = this.form.payType.split(",");
      this.drugAllergyArr = this.form.drugAllergy.split(",");
      this.exposureArr = this.form.exposure.split(",");
      this.fatherPrevalenceArr = this.form.fatherPrevalence.split(",");
      this.motherPrevalenceArr = this.form.motherPrevalence.split(",");
      this.brotherPrevalenceArr = this.form.brotherPrevalence.split(",");
      this.childrenPrevalenceArr = this.form.childrenPrevalence.split(",");
    },
    pushForm() {
      this.$refs.formRef.validateField("idCard", (valid) => {
        if (valid) return this.$message.error("请输入正确身份证号!");
        getByCard(this.form.idCard).then((res) => {
          this.formData(res.data);
        });
      });
    },
    //供父组件调用函数
    editForm(row,ifEdit) {
      this.ifEdit = ifEdit
      this.formData(row)
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
